import React, { Component } from "react";
import { PropTypes } from "prop-types";

class TodoItem extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this); //在constructor中将函数的this指向通过bind修改为指向当前组件   这种写法较好
  }

  render() {
    const { content,test } = this.props;
    return (
      <div onClick={this.handleClick}>
        {test}-{content}
      </div>
    );
  }

  handleClick() {
    const { deleteItem, index } = this.props;
    deleteItem(index);
    //this.props.deleteItem(this.props.index); //执行父组件定义的方法deleteItem
  }
}

TodoItem.propTypes = {
  test: PropTypes.string.isRequired,// 你可以在任何 PropTypes 属性后面加上 `isRequired` ，确保这个 prop 没有被提供时，会打印警告信息。
  content: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),// 一个对象可以是几种类型中的任意一个类型
  deleteItem: PropTypes.func,
  index: PropTypes.number
};

TodoItem.defaultProps = {
  test: "父组件没传值时，设置的默认值"
};

export default TodoItem;
